<template>
  <div class="data-storage-management">
    <!-- 存储方案配置 -->
    <el-card class="box-card" style="margin-bottom: 24px;">
      <div slot="header" class="clearfix">
        <span>存储方案配置</span>
      </div>
      <el-row :gutter="20">
        <!-- 时序数据存储配置 -->
        <el-col :span="8">
          <el-card>
            <div class="section-title">
              <i class="el-icon-time"></i> 时序数据存储配置
            </div>
            <el-form :model="timeSeriesConfig" label-width="90px">
              <el-form-item label="数据库类型">
                <el-select v-model="timeSeriesConfig.dbType" placeholder="请选择">
                  <el-option label="InfluxDB" value="InfluxDB"></el-option>
                  <el-option label="TDengine" value="TDengine"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="分片周期">
                <el-select v-model="timeSeriesConfig.shardDuration" placeholder="请选择">
                  <el-option label="24小时/片" value="24小时/片"></el-option>
                  <el-option label="12小时/片" value="12小时/片"></el-option>
                  <el-option label="1小时/片" value="1小时/片"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="副本数量">
                <el-select v-model="timeSeriesConfig.replica" placeholder="请选择">
                  <el-option label="3副本" value="3副本"></el-option>
                  <el-option label="2副本" value="2副本"></el-option>
                  <el-option label="1副本" value="1副本"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="saveTimeSeriesConfig">启用配置</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
        <!-- 结构化数据存储配置 -->
        <el-col :span="8">
          <el-card>
            <div class="section-title">
              <i class="el-icon-s-data"></i> 结构化数据存储配置
            </div>
            <el-form :model="structuredConfig" label-width="90px">
              <el-form-item label="数据库类型">
                <el-select v-model="structuredConfig.dbType" placeholder="请选择">
                  <el-option label="MySQL" value="MySQL"></el-option>
                  <el-option label="HBase" value="HBase"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="连接池大小">
                <el-select v-model="structuredConfig.poolSize" placeholder="请选择">
                  <el-option label="50个连接" value="50个连接"></el-option>
                  <el-option label="100个连接" value="100个连接"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="表空间配置">
                <el-select v-model="structuredConfig.tableSpace" placeholder="请选择">
                  <el-option label="自动扩展" value="自动扩展"></el-option>
                  <el-option label="固定空间" value="固定空间"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="saveStructuredConfig">启用配置</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
        <!-- 非结构化数据存储配置 -->
        <el-col :span="8">
          <el-card>
            <div class="section-title">
              <i class="el-icon-upload"></i> 非结构化数据存储配置
            </div>
            <el-form :model="unstructuredConfig" label-width="90px">
              <el-form-item label="存储类型">
                <el-select v-model="unstructuredConfig.storageType" placeholder="请选择">
                  <el-option label="MinIO对象存储" value="MinIO"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="Elasticsearch连接">
                <el-input v-model="unstructuredConfig.esUrl" placeholder="输入连接地址"></el-input>
              </el-form-item>
              <el-form-item label="索引服务配置">
                <el-select v-model="unstructuredConfig.indexConfig" placeholder="请选择">
                  <el-option label="自动分片" value="自动分片"></el-option>
                  <el-option label="手动分片" value="手动分片"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="saveUnstructuredConfig">启用配置</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
      <!-- 存储状态监控 -->
      <el-row :gutter="20" style="margin-top: 24px;">
        <el-col :span="6">
          <el-card>
            <div class="monitor-title">存储容量</div>
            <div class="monitor-value">{{ storageStatus.capacity }}%</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <div class="monitor-title">副本状态</div>
            <div class="monitor-value">{{ storageStatus.replicaStatus }}</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <div class="monitor-title">IOPS</div>
            <div class="monitor-value">{{ storageStatus.iops }}</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <div class="monitor-title">响应时间</div>
            <div class="monitor-value">{{ storageStatus.responseTime }}ms</div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 24px;">
        <el-col :span="6">
          <el-button icon="el-icon-refresh" @click="backupAll">一键备份</el-button>
        </el-col>
        <el-col :span="6">
          <el-button icon="el-icon-s-claim" @click="optimizePerformance">性能优化</el-button>
        </el-col>
        <el-col :span="6">
          <el-button icon="el-icon-search" @click="diagnoseStorage">存储诊断</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 结构化数据表结构设计 -->
    <el-card class="box-card" style="margin-bottom: 24px;">
      <div slot="header" class="clearfix">
        <span>结构化数据表结构设计</span>
      </div>
      <el-tabs v-model="structuredTab">
        <el-tab-pane label="工单表" name="workOrder">
          <el-table :data="workOrderFields" border style="width: 100%">
            <el-table-column prop="name" label="字段名"></el-table-column>
            <el-table-column prop="type" label="类型"></el-table-column>
            <el-table-column prop="index" label="索引">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.index" type="success">主键</el-tag>
                <span v-else>—</span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="生产计划表" name="plan">
          <el-table :data="planFields" border style="width: 100%">
            <el-table-column prop="name" label="字段名"></el-table-column>
            <el-table-column prop="type" label="类型"></el-table-column>
            <el-table-column prop="index" label="索引">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.index" type="success">主键</el-tag>
                <span v-else>—</span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 非结构化数据存储与检索 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>非结构化数据存储与检索</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-upload
            class="upload-demo"
            drag
            action=""
            :auto-upload="false"
            :on-change="handleFileChange"
            :file-list="fileList"
            :before-remove="beforeRemove"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-col>
        <el-col :span="12">
          <el-form :model="searchRule" label-width="90px">
            <el-form-item label="检索规则">
              <el-select v-model="searchRule.rule" placeholder="请选择">
                <el-option label="按故障现象分词" value="故障现象"></el-option>
                <el-option label="按处理步骤分词" value="处理步骤"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="关键词">
              <el-input v-model="searchRule.keyword" placeholder="请输入关键词"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchFiles">检索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-table :data="filteredFiles" border style="margin-top: 20px;">
        <el-table-column prop="name" label="文件名"></el-table-column>
        <el-table-column prop="type" label="类型"></el-table-column>
        <el-table-column prop="uploadTime" label="上传时间"></el-table-column>
        <el-table-column prop="meta" label="元数据"></el-table-column>
      </el-table>
      <div style="margin-top: 10px; color: #909399;">
        测试亿级数据点查询响应时间：<span style="color: #67C23A;">≤1秒</span>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'DataStorageManagement',
  data() {
    return {
      // 时序数据配置
      timeSeriesConfig: {
        dbType: 'InfluxDB',
        shardDuration: '24小时/片',
        replica: '3副本'
      },
      // 结构化数据配置
      structuredConfig: {
        dbType: 'MySQL',
        poolSize: '50个连接',
        tableSpace: '自动扩展'
      },
      // 非结构化数据配置
      unstructuredConfig: {
        storageType: 'MinIO',
        esUrl: '',
        indexConfig: '自动分片'
      },
      // 存储状态监控
      storageStatus: {
        capacity: 75,
        replicaStatus: '正常',
        iops: 2567,
        responseTime: 45
      },
      // 结构化表结构
      structuredTab: 'workOrder',
      workOrderFields: [
        { name: '工单ID', type: '字符串', index: true },
        { name: '创建时间', type: '日期', index: false },
        { name: '状态', type: '字符串', index: false }
      ],
      planFields: [
        { name: '计划ID', type: '字符串', index: true },
        { name: '计划时间', type: '日期', index: false },
        { name: '负责人', type: '字符串', index: false }
      ],
      // 非结构化文件
      fileList: [],
      files: [],
      searchRule: {
        rule: '故障现象',
        keyword: ''
      },
      filteredFiles: []
    }
  },
  created() {
    this.loadConfigs();
    this.loadFiles();
  },
  methods: {
    // 配置持久化
    saveTimeSeriesConfig() {
      localStorage.setItem('timeSeriesConfig', JSON.stringify(this.timeSeriesConfig));
      this.$message.success('时序数据存储配置已保存');
    },
    saveStructuredConfig() {
      localStorage.setItem('structuredConfig', JSON.stringify(this.structuredConfig));
      this.$message.success('结构化数据存储配置已保存');
    },
    saveUnstructuredConfig() {
      localStorage.setItem('unstructuredConfig', JSON.stringify(this.unstructuredConfig));
      this.$message.success('非结构化数据存储配置已保存');
    },
    loadConfigs() {
      const t = localStorage.getItem('timeSeriesConfig');
      if (t) this.timeSeriesConfig = JSON.parse(t);
      const s = localStorage.getItem('structuredConfig');
      if (s) this.structuredConfig = JSON.parse(s);
      const u = localStorage.getItem('unstructuredConfig');
      if (u) this.unstructuredConfig = JSON.parse(u);
    },
    // 文件上传与元数据生成
    handleFileChange(file, fileList) {
      // 只在本地处理，不上传
      const meta = {
        name: file.name,
        type: file.raw.type || '未知',
        uploadTime: this.formatDate(new Date()),
        meta: `文件名:${file.name} 类型:${file.raw.type || '未知'} 上传时间:${this.formatDate(new Date())}`
      };
      this.files.push(meta);
      this.fileList = fileList;
      this.saveFiles();
      this.$message.success('文件已添加（仅本地模拟）');
    },
    beforeRemove(file, fileList) {
      this.files = this.files.filter(f => f.name !== file.name);
      this.saveFiles();
      return true;
    },
    saveFiles() {
      localStorage.setItem('unstructuredFiles', JSON.stringify(this.files));
      this.filterFiles();
    },
    loadFiles() {
      const f = localStorage.getItem('unstructuredFiles');
      this.files = f ? JSON.parse(f) : [];
      this.fileList = this.files.map(f => ({
        name: f.name,
        url: '',
        status: 'success'
      }));
      this.filterFiles();
    },
    // 检索规则
    searchFiles() {
      this.filterFiles();
      this.$message.success('检索完成');
    },
    filterFiles() {
      if (!this.searchRule.keyword) {
        this.filteredFiles = this.files;
        return;
      }
      // 简单模拟分词检索
      this.filteredFiles = this.files.filter(f =>
        f.meta.includes(this.searchRule.keyword)
      );
    },
    // 监控与操作
    backupAll() {
      this.$message.success('所有数据已备份（模拟）');
    },
    optimizePerformance() {
      this.$message.success('存储性能已自动优化（模拟）');
    },
    diagnoseStorage() {
      this.$message.success('存储健康状态良好（模拟）');
    },
    formatDate(date) {
      const y = date.getFullYear();
      const m = ('0' + (date.getMonth() + 1)).slice(-2);
      const d = ('0' + date.getDate()).slice(-2);
      const h = ('0' + date.getHours()).slice(-2);
      const min = ('0' + date.getMinutes()).slice(-2);
      const s = ('0' + date.getSeconds()).slice(-2);
      return `${y}-${m}-${d} ${h}:${min}:${s}`;
    }
  }
}
</script>

<style scoped>
.data-storage-management {
  padding: 24px;
  background: #f5f7fa;
}
.box-card {
  margin-bottom: 24px;
}
.section-title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}
.section-title i {
  margin-right: 6px;
}
.monitor-title {
  color: #909399;
  font-size: 14px;
}
.monitor-value {
  font-size: 22px;
  font-weight: bold;
  margin-top: 8px;
}
.upload-demo {
  width: 100%;
}
</style>
